<template>
  <div class="container">
    <div v-if="account">
      <van-grid :column-num="1" :border="false" clickable class="account-grid">
        <van-grid-item>
          <template slot="text">
            <h1 class="font-number">{{account.rate}}</h1>
            <label class="account-grid__label">专属折扣比例</label>
          </template>
        </van-grid-item>
      </van-grid>
      <van-grid :column-num="2" clickable :border="false" class="account-grid">
        <van-grid-item>
          <template slot="text">
            <label class="account-grid__label">入驻时长（天）</label>
            <p class="account-grid__text">{{account.days}}</p>
          </template>
        </van-grid-item>
        <van-grid-item>
          <template slot="text">
            <label class="account-grid__label">累积收益（元）</label>
            <p class="account-grid__text">{{account.amount}}</p>
          </template>
        </van-grid-item>
      </van-grid>
    </div>

    <van-cell-group>
      <van-cell title="可用余额" :value="account.current+'元'" center class="van-cell-media"></van-cell>
    </van-cell-group>
    <van-cell-group class="mt10">
      <van-cell title="已申请佣金" value="0.00元" center class="van-cell-media">
        <template slot="icon">
          <img src="../../assets/icons/gray/balance_wait.png" class="van-cell-media-icon" />
        </template>
      </van-cell>
      <van-cell title="待打款佣金" value="0.00元" center class="van-cell-media">
        <template slot="icon">
          <img src="../../assets/icons/gray/coffe.png" class="van-cell-media-icon" />
        </template>
      </van-cell>
      <van-cell title="无效佣金" value="0.00元" center class="van-cell-media">
        <template slot="icon">
          <img src="../../assets/icons/gray/invalid.png" class="van-cell-media-icon" />
        </template>
      </van-cell>
      <van-cell title="成功提现佣金" value="0.00元" center class="van-cell-media">
        <template slot="icon">
          <img src="../../assets/icons/gray/wallet.png" class="van-cell-media-icon" />
        </template>
      </van-cell>
      <van-cell title="待收货佣金" value="0.00元" center class="van-cell-media">
        <template slot="icon">
          <img src="../../assets/icons/gray/truck.png" class="van-cell-media-icon" />
        </template>
      </van-cell>
      <van-cell title="未结算佣金" value="0.00元" center class="van-cell-media">
        <template slot="icon">
          <img src="../../assets/icons/gray/waiting.png" class="van-cell-media-icon" />
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import {
  Row,
  Col,
  Icon,
  Circle,
  Button,
  Cell,
  CellGroup,
  Swipe,
  SwipeItem,
  Card,
  Grid,
  GridItem,
  Lazyload
} from 'vant'

export default {
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Circle.name]: Circle,
    [Button.name]: Button,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Card.name]: Card,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    Lazyload
  },

  data () {
    return {
      rate: 0,
      days: 0,
      amount: 0,
      account: {
        amount: 0,
        current: 0,
        rate: 0,
        days: 0
      },
      categories: [],
      swipes: [],
      goods: [],
      currentDate: '--'
    }
  },

  created () {
    this.onLoad()
  },

  computed: {
    currentRate () {
      return this.goods.reduce(
        (total, item) =>
          total + (this.checkedGoods.indexOf(item.id) !== -1 ? item.price : 0),
        0
      )
    }
  },

  methods: {
    redirect (name, id) {
      this.$router.push({ name: name, params: { id: id } })
    },
    formatRate (rate) {
      return (1 - rate) * 100
    },
    formatPrice (price) {
      return (price / 100).toFixed(2)
    },
    onLoad () {
      this.axios
        .get('/commission/brokerage')
        .then(response => {
          this.account = response.data
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.commission-header {
  background: #3a95fe;
}

.account-grid {
  h1 {
    font-size: 36px;
    display: inline-flex;
    margin: 0;
    padding: 20px 0;
    &::after {
      content: "%";
      font-weight: 500;
      text-indent: 0;
      font-family: Arial, "BebasNeueRegular", "Bebas Neue";
      align-self: flex-start;
      transform: scale(0.5);
      margin-right: -5%;
      color: rgba(0, 0, 0, 0.3);
    }
  }
  &__label {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.3);
  }
  &__text {
    font-size: 15px;
    margin: 10px 0;
  }
}

.trade-countdown {
  background: #fff;
  margin-top: 1px;
  text-align: center;
  padding: 20px;
  /deep/ .van-circle {
    width: 80px !important;
    height: 80px !important;
  }
}
</style>
